<template>
  <view>
    <view class="form-cell">
      <view class="form-cell__laber">站点编号</view>
      <view class="form-cell__value">
        <input placeholder="请输入站点编号" type="number" />
      </view>
    </view>
	<view class="form-cell">
	  <view class="form-cell__laber">联系电话</view>
	  <view class="form-cell__value">
	    <input placeholder="请输入联系电话" type="number" />
	  </view>
	</view>
    <view class="form-cell">
      <view class="form-cell__laber">站点地址</view>
      <view class="form-cell__value">
        <input placeholder="请输入站点地址" type="text" />
      </view>
    </view>
    <view class="form-cell">
      <view class="form-cell__laber">本次巡检时间</view>
      <view class="form-cell__value">
        {{date}}
      </view>
    </view>
    <view class="form-cell">
      <view class="form-cell__laber">站点情况</view>
      <view class="form-cell__value">
        <radio-group>
          <label class="form-cell__radio">
            <radio value="01">正常</radio>
          </label>
          <label class="form-cell__radio">
            <radio value="02">异常</radio>
          </label>
        </radio-group>
      </view>
    </view>
    <view class="form-cell">
      <view class="form-cell__laber">备注</view>
      <view class="form-cell__value">
        <textarea
          style="width: 100%;height: 150upx;"
          placeholder="备注信息"
        ></textarea>
      </view>
    </view>
    <view class="uploader">
      <view class="uploader__title">站点照片</view>
      <view class="uploader__wrapper">
        <view
          v-if="imgList.length > 0"
          class="uploader__preview"
          v-for="(item, index) in imgList"
          :key="index"
        >
          <view class="uploader__preview-img" @click="previewImage(item)">
            <image :src="item.path"></image>
          </view>
          <view
            class="uploader__preview-delete iconfont icontrash-gray"
            @click="handleDelete(item)"
          ></view>
        </view>
        <view
          v-if="imgList.length < 3"
          class="uploader__upload"
          @click="chooseImage"
        >
          <view class="uploader__upload-icon iconfont iconjia-copy"></view>
        </view>
      </view>
    </view>
    <view class="submit-btn" hover-class="grid-hover">保存</view>
  </view>
</template>

<script>
import utils from '@/common/utils'
export default {
  data () {
    return {
      date: utils.formatDate(new Date),
      imgList: []
    }
  },
  onLoad (option) {
    console.log(option)
  },
  methods: {
    chooseImage () {
      uni.chooseImage({
        count: 3 - this.imgList.length,
        sizeType: 'original',
        sourceType: ['album', 'camera'],
        success: res => {
          console.log(res)
          res.tempFiles.forEach(item => {
            this.imgList.push(item)
          })
        }
      })
    },
    previewImage (item) {
      uni.previewImage({ urls: [item.path] })
    },
    handleDelete (item) {
      this.imgList.splice(this.imgList.indexOf(item), 1)
    }
  }
}
</script>

<style lang="less">
.form-cell {
  position: relative;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  padding: 20upx 32upx;
  overflow: hidden;
  color: #323233;
  font-size: 14px;
  line-height: 24px;
  background-color: #fff;
  .form-cell__laber {
    flex: 0.4;
  }
  .form-cell__value {
    margin-left: 20upx;
    flex: 0.6;
  }
  .form-cell__radio {
    margin-right: 20upx;
  }
}
.form-cell:not(:last-child)::after {
  position: absolute;
  box-sizing: border-box;
  content: ' ';
  pointer-events: none;
  right: 0;
  bottom: 0;
  left: 16px;
  border-bottom: 1px solid #ebedf0;
  transform: scaleY(0.5);
}
.uploader {
  padding: 20upx 32upx;
  background-color: #fff;
  .uploader__title {
    font-size: 14px;
    margin-bottom: 20upx;
  }
  .uploader__wrapper {
    display: flex;
    flex-wrap: wrap;
    .uploader__preview {
      position: relative;
      margin: 0 16upx 16upx 0;
      .uploader__preview-img {
        width: 150upx;
        height: 150upx;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .uploader__preview-delete {
        position: absolute;
        right: 0;
        bottom: 0;
        padding: 1px;
        color: #fff;
        background-color: rgba(0, 0, 0, 0.45);
      }
    }
    .uploader__upload {
      width: 150upx;
      height: 150upx;
      background-color: #fff;
      border: 2upx dashed #e5e5e5;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 16upx 16upx 0;
      .uploader__upload-icon {
        width: 48upx;
        height: 48upx;
        font-size: 48upx;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
.submit-btn {
  height: 90upx;
  background-color: #f44;
  margin: 50upx 20upx;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.grid-hover {
  opacity: 0.8;
}
</style>
